<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    table,
    td {
      border: 1px solid #000;
    }

    table {
      border-collapse: collapse;
    }

    td {
      padding: 0 20px;
      line-height: 45px;
    }
  </style>
</head>

<body>
  <!-- <table>
    <tr>
      <td>1x1=01</td>
      <td>2x2=02</td>
      <td>3x3=03</td>
      <td>4x4=04</td>
      <td>5x5=05</td>
      <td>6x6=06</td>
      <td>7x7=07</td>
      <td>8x8=08</td>
      <td>9x9=09</td>
    </tr>
    <tr>
      <td>1x1=01</td>
      <td>2x2=02</td>
      <td>3x3=03</td>
      <td>4x4=04</td>
      <td>5x5=05</td>
      <td>6x6=06</td>
      <td>7x7=07</td>
      <td>8x8=08</td>
      <td>9x9=09</td>
    </tr>
    <tr>
      <td>1x1=01</td>
      <td>2x2=02</td>
      <td>3x3=03</td>
      <td>4x4=04</td>
      <td>5x5=05</td>
      <td>6x6=06</td>
      <td>7x7=07</td>
      <td>8x8=08</td>
      <td>9x9=09</td>
    </tr>
    <tr>
      <td>1x1=01</td>
      <td>2x2=02</td>
      <td>3x3=03</td>
      <td>4x4=04</td>
      <td>5x5=05</td>
      <td>6x6=06</td>
      <td>7x7=07</td>
      <td>8x8=08</td>
      <td>9x9=09</td>
    </tr>
    <tr>
      <td>1x1=01</td>
      <td>2x2=02</td>
      <td>3x3=03</td>
      <td>4x4=04</td>
      <td>5x5=05</td>
      <td>6x6=06</td>
      <td>7x7=07</td>
      <td>8x8=08</td>
      <td>9x9=09</td>
    </tr>
    <tr>
      <td>1x1=01</td>
      <td>2x2=02</td>
      <td>3x3=03</td>
      <td>4x4=04</td>
      <td>5x5=05</td>
      <td>6x6=06</td>
      <td>7x7=07</td>
      <td>8x8=08</td>
      <td>9x9=09</td>
    </tr>
    <tr>
      <td>1x1=01</td>
      <td>2x2=02</td>
      <td>3x3=03</td>
      <td>4x4=04</td>
      <td>5x5=05</td>
      <td>6x6=06</td>
      <td>7x7=07</td>
      <td>8x8=08</td>
      <td>9x9=09</td>
    </tr>
    <tr>
      <td>1x1=01</td>
      <td>2x2=02</td>
      <td>3x3=03</td>
      <td>4x4=04</td>
      <td>5x5=05</td>
      <td>6x6=06</td>
      <td>7x7=07</td>
      <td>8x8=08</td>
      <td>9x9=09</td>
    </tr>
    <tr>
      <td>1x1=01</td>
      <td>2x2=02</td>
      <td>3x3=03</td>
      <td>4x4=04</td>
      <td>5x5=05</td>
      <td>6x6=06</td>
      <td>7x7=07</td>
      <td>8x8=08</td>
      <td>9x9=09</td>
    </tr>
  </table> -->
</body>
<script>

  // JS动态生成的思路
  // 1. 先写静态页面
  // 2. 在改为动态生成

  // document.write()  可以输出html结构到页面中 => 会被页面正确解读
  // document.write("<h2>123123123</h2>");
  // document.write("<h2>");
  // document.write("hello");
  // document.write("</h2>");


  document.write("<table>");

  // var i = 1;
  // while (i <= 9) {
  //   document.write("<tr>");

  //   var j = 1;
  //   while (j <= i) {
  //     document.write("<td>");
  //     // document.write("1x1=1");
  //     document.write(i + "*" + j + "=" + (i * j) + "\n");
  //     document.write("</td>");
  //     j++;
  //   }


  //   document.write("</tr>");
  //   i++;
  // }

  for (i = 1; i <= 9; i++) {
    document.write("<tr>");

    for (j = 1; j <= i; j++) {
      document.write("<td>");
      // document.write("1x1=1");
      // document.write(i + "*" + j + "=" + (i * j) + "\n");
      document.write(j + "x" + i + "=" + i * j);
      document.write("</td>");
    }
    document.write("</tr>");

  }
  document.write("</table>");



</script>

</html>